<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../public/stylesheets/shou.css">
</head>
<style>
  #v_container{
    width: 100px;
    height: 40px;
  }
</style>
<body>
    <!-- 头部 -->
    <div class="top-box">
       <img src="../public/images/logo.png" alt="">
       <span>学生信息管理系统</span>
    </div>

    <!-- 中间部分 -->
    <div class="middle">
        <img src="../public/images/map.jpg" alt="">

        <!-- 中间的登录验证 -->
      <div class="form-box">
          <h3>平台登陆</h3>
        <form action="#">
            <div class="input-box">
              <input type="text" name=""  placeholder="账号">
            </div>
            <div class="input-box">
                <input type="text" name=""  placeholder="密码">
              </div>
           
              
            <!-- 验证码 -->
            
	 
            <div class="input-box input-box1">
              <input type="text" id="code_input" value="" placeholder="请输入验证码"/>
            </div>

           <div id="v_container"></div>
    
              

            <div class="input-box">
               <button id="my_button">登录</button>
            </div>
        </form>
      </div>
    </div>

    <!-- 底部 -->
    <div class="bibu">
       <p>Powered by 打造前程 © 2014-2020 北京打造前程互联网教育科技有限公司 版权所有</p>
    </div>
</body>
<script src="../public/javascripts/gVerify.js"></script>
	<script>
		var verifyCode = new GVerify("v_container");
		console.log(verifyCode)
		document.getElementById("my_button").onclick = function(){
			var res = verifyCode.validate(document.getElementById("code_input").value);
			if(res){
				alert("验证正确");
			}else{
				alert("验证码错误");
			}
		}
	</script>
</html>